<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <link rel="stylesheet" href="./css/loginframe.css">
</head>
<body>
    <div class="container">
        <!-- 短信登陆/注册  密码登录 -->
        <div class="login">
            <!-- 切换菜单. -->
            <div class="switch-menu .clearfix">
                <span class="left selected">短信登陆/注册</span>
                <span class="right">密码登录</span>
            </div>

            <!-- 表单 -->
            <form >
                <!-- 短信登录/注册表单 -->
                <div class="hidden">
                    <div class="form-item">
                        <p class="txt">请仔细阅读
                            <a href="" class="policy">豆瓣使用协议、豆瓣个人信息保护政策</a>
                        </p>
                    </div>
        
                    <!-- +86手机号 输入框 -->
                    <div class="form-item">
                        <input type="text" class="more-text-indent" placeholder="手机号">
                        <div class="area-code">
                            <div class="selected">
                                + 86
                            </div>
                            <!-- 区号选择 -->
                            <div class="choose-area hidden">
                                <div class="center">
                                    <div class="title">选择国际区号</div>
                                    <ul>
                                        <li class="clearfix selected"><span class="left">国家名1</span>
                                            <i class="iconfont left icon--zhengque"></i>
                                            <span class="right">1</span></li>
                                        <li class="clearfix"><span class="left">国家名2</span><span class="right">2</span></li>
                                        <li class="clearfix"><span class="left">国家名3</span><span class="right">3</span></li>
                                        <li class="clearfix"><span class="left">国家名4</span><span class="right">4</span></li>
                                        <li class="clearfix"><span class="left">国家名5</span><span class="right">5</span></li>
                                        <li class="clearfix"><span class="left">国家名6</span><span class="right">6</span></li>
                                        <li class="clearfix"><span class="left">国家名7</span><span class="right">7</span></li>
                                        <li class="clearfix"><span class="left">国家名8</span><span class="right">8</span></li>
                                        <li class="clearfix"><span class="left">国家名9</span><span class="right">9</span></li>
                                        <li class="clearfix"><span class="left">国家名10</span><span class="right">10</span></li>
                                        <li class="clearfix"><span class="left">国家名11</span><span class="right">11</span></li>
                                        <li class="clearfix"><span class="left">国家名12</span><span class="right">12</span></li>
                                        <li class="clearfix"><span class="left">国家名13</span><span class="right">13</span></li>
                                        <li class="clearfix"><span class="left">国家名14</span><span class="right">14</span></li>
                                        <li class="clearfix"><span class="left">国家名15</span><span class="right">15</span></li>
                                        <li class="clearfix"><span class="left">国家名16</span><span class="right">16</span></li>
                                        <li class="clearfix"><span class="left">国家名17</span><span class="right">17</span></li>
                                        <li class="clearfix"><span class="left">国家名18</span><span class="right">18</span></li>
                                        <li class="clearfix"><span class="left">国家名19</span><span class="right">19</span></li>
                                        <li class="clearfix"><span class="left">国家名20</span><span class="right">20</span></li>
                                    </ul>
                                </div>
                                
                            </div>
                        </div>
                    </div>
        
                    <!-- 验证码 -->
                    <div class="form-item">
                        <input type="text" placeholder="验证码">
                        <a href="" class="getcode">获取验证码</a>
                    </div>
                    
                    <!-- 登录 -->
                    <div class="form-item logindouban">
                        <button class="btn">登录</button>
                    </div>
        
                    <!-- 收不到验证码 -->
                    <div class="form-item clearfix  ">
                        <label class="left">
                            <input type="checkbox">下次自动登录
                        </label>
                        <div class="revcode  right">
                            <a href="">收不到验证码</a>
                        </div>
                    </div>
                </div>
            
                <!-- 密码登录 -->
                <div>
                    <div class="form-item">
                        <input type="text" placeholder="手机号/邮箱">
                    </div>
                    <div class="form-item ">
                        <input type="password" placeholder="密码">
                        <a href="" class="findpassword">找回密码</a>
                    </div>
                    <div class="form-item logindouban">
                        <button class="btn disable">登录</button>
                    </div>
    
                    <div class="form-item clearfix  ">
                        <div class="revcode  right">
                            <a href="">海外手机登录</a>
                        </div>
                    </div>
    
                    
                </div>
    
                
            </form>

            <div class="bottom">
                <div>
                    <div class=" thirdlogin">第三方登录</div>
                </div>

                <div class="iconbox">
                    <a href=""><i class="iconfont icon-weixin"></i></a>
                    <a href=""><i class="iconfont icon-qq"></i></a>
                    <a href=""><i class="iconfont icon-weibo"></i></a>
                </div>
                
            </div> 

            <!-- 扫码登录 -->
            <div class="qrcode hidden">
                <div class="codelogin">二维码登录</div>

                <div class="qrimg">
                    <img src="img/qrcode.png" alt="">
                </div>

                <div class="scanlogin">
                    <div class="iconqr">
                        <i class="iconfont icon-iconfontscan"></i>
                    </div>
                    
                    <div class="tip">
                        <span>打开</span>
                        <a href="">豆瓣 App</a> 
                        <div class="sacn">扫一扫登录</div>
                    </div>
                </div>
            </div>

            <div class="switch-login">
                <i class="iconqr hidden"></i>
                <i class="iconmsg "></i>
            </div>

        </div>

        

        

        
    </div>
</body>
</html>